<!--
 @description: 圆点加文字的标签
 @Author: chich
 @Date: 2021-04-27
-->
<template>
    <div class="dot-label">
        <span class="dot-label__sign" :style="{backgroundColor: bgColor}"></span>{{label}}
    </div>
</template>
<script>
    export default {
        name: "dot-label",
        props: {
            type: {
                type: String,
                default: 'default'
            },

            label: {
                type: String,
                default: ''
            },

            color: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                colorSet: {
                    'default': '#1790ff',
                    'success': '#54c41a',
                    'warning': '#fdb801',
                    'danger': '#f58521',
                    'error': '#f62230'
                }
            };
        },
        computed: {
            bgColor() {
                return this.color || this.colorSet[this.type]
            }
        },
        methods: {},
        created() {
        },
        mounted() {
        }
    };
</script>
<style scoped lang="scss">
    .dot-label {
        display: inline;
        &__sign {
            display: inline-block;
            width: 12px;
            height: 12px;
            margin-right: 8px;
            border-radius: 100%;
            background-color: #1790ff;
        }
    }
</style>